<script setup lang="ts">
import MapVerse from '@/components/MapVerse/index.vue'
import dataJson from './test.json'
import { towersToGeoJSON } from './towersToGeoJSON.ts'
import {layer} from 'mars3d'
import type { Map } from 'mars3d'
import { towersToPointGeoJSON } from '@/views/globalStatistics/towersToPointGeoJSON.ts'

// 组件名称遵循多词规范
defineOptions({
  name: 'GlobalStatisticsLayout',
})

/**
 * 地图初始化完成回调
 * @param mapInstance Mars3D地图实例
 */
const handleMapInit = (mapInstance: Map) => {
  console.log('地图初始化完成:', mapInstance)
  const geoJson = towersToGeoJSON(dataJson)

  const geoJSONLayer = new layer.GeoJsonLayer({
    data: geoJson,
    // 可选配置（推荐加上）
    symbol: {
      styleOptions: {
        color: "#ff0000",   // 线条颜色
        width: 3            // 线条宽度
      }
    },
    popup: "all",
    flyTo:true,
  })
  mapInstance.addLayer(geoJSONLayer)
  geoJSONLayer.flyTo()


  const pointGeoJson = towersToPointGeoJSON(dataJson);

  const pointLayer = new layer.GeoJsonLayer({
    data: pointGeoJson,
    symbol: {
      styleOptions: {
        pixelSize: 8,
        color: "#00ff00",
        outline: true,
        outlineColor: "#000",
        outlineWidth: 2
      }
    },
    popup: "all" // 点击显示所有属性
  });

  mapInstance.addLayer(pointLayer);
}
</script>

<template>
  <div class="global-statistics-layout">
    <div class="global-statistics-layout__view">
      <RouterView />
    </div>
    <div class="global-statistics-layout__map">
      <MapVerse
        mapId="globalStatisticsMap"
        mapType="online"
        baseMapType="img"
        :showAnnotation="true"
        tdtToken="1ea4743de769c03d35e0361334c8fde7"
        @initMap="handleMapInit"
      />
    </div>
  </div>
</template>

<style scoped lang="scss">
.global-statistics-layout {
  width: 100%;
  height: 100%;
  position: relative;

  &__view {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    pointer-events: none;
  }

  &__map {
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    position: fixed;
    // 不要设置z-index，和HSB/components/header呼应
  }
}
</style>
